<template>
  <div>
    <!-- 轮播图 -->
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in imageList" :key="item">
        <el-image style="width: 10rem" :src="item"></el-image>
      </el-carousel-item>
    </el-carousel>

    <!-- 提示 -->

    <div class="box">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>图书馆公告</span>
        </div>
        <div v-for="item in libraryList" :key="item" class="text item">
          <span class="tip">{{ item | ellipsis }}</span>
        </div>
      </el-card>
    </div>
    <div class="box">
      <el-button type="primary" @click="toBook">预约座位</el-button>
      <el-button type="primary" @click="toMy">我的</el-button>
    </div>

    <el-button type="text" @click="dialogVisible = true"
      >点击打开 预约座位说明</el-button
    >
    <div class="box">
      <el-button type="success" round @click="signIn">签到</el-button>
      <!-- <el-popconfirm title="确定要释放座位吗？"> -->
      <el-button type="warning" round slot="reference" @click="signOut"
        >离开</el-button
      >
      <!-- </el-popconfirm> -->
    </div>
    <div class="box">
      <el-button icon="el-icon-edit">查看排名</el-button>
      <!-- <el-button icon="el-icon-share">发现无人座位</el-button> -->
      <el-button icon="el-icon-tableware">中途离开</el-button>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="7rem"
      :before-close="handleClose"
    >
      <span>预约定位说明</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >我已知晓</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  margin: 0;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
  font-size: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.clearfix {
  font-size: 18px;
}

/* .box-card {
  width: 9.7rem;
} */

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
/* 
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
} */

.box {
  margin: 0.3rem 0.2rem 0 0.2rem;
}
.tip {
  max-width: 8rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; /*超出部分用...代替*/
}
</style>


<script>
import axios from "axios";
import seat from "../../components/seat";
export default {
  data() {
    return {
      dialogVisible: false,
      libraryList: [
        "图书馆关于2021年劳动节放假期间开放安排的通知",
        "图书馆关于2021年清明节、“壮族三月三”期间放假开放安排的通知",
        "【大赛报名】2021 incoPat新科技检索大赛“未来IP专家”高校精英赛即日启动",
      ],
      imageList: [
        "https://z3.ax1x.com/2021/05/02/gZr0gO.jpg",
        "https://z3.ax1x.com/2021/05/02/gZrU4x.jpg",
        "https://z3.ax1x.com/2021/05/02/gZrdC6.jpg",
        "https://z3.ax1x.com/2021/05/02/gZrw8K.jpg",
      ],
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    toBook() {
      if (sessionStorage.getItem("userId") != null) {
        this.$router.replace("/information");
      } else {
        this.$router.replace("/login");
      }
    },
    toMy() {
      this.$router.replace("/my");
    },
    /*
    签到      
    */
    async signIn() {
      let Name = sessionStorage.getItem("userName");
      // console.log(Name);
      if (Name == null) {
        this.$message.error("您还未登陆或未预约");
      } else {
        // let data = await axios({
        //   method: "get",
        //   url: "http://120.77.41.127:8080/bookInfo/query",
        // });

        let res = await axios.get("http://120.77.41.127:8080/bookInfo/query");
        let data = res.data.data;
        let flag = 0;
        let signTime = new Date();
        for (let i = 0; i < data.length; i++) {
          if (data[i].odermyname == Name) {
            let res = await axios.get("http://localhost:3000/user/authorize", {
              params: {
                msg: "签到成功！",
                date: Date.parse(signTime),
              },
            });
            sessionStorage.setItem("signTime", signTime);
            this.$message.success("签到成功！");
            flag = 1;
            break;
          }
        }

        if (flag == 0) this.$message.error("您还未预约");
      }
    },
    /**
     * 离开
     */
    async signOut() {
      let signInTime = new Date(sessionStorage.getItem("signTime"));
      if (sessionStorage.getItem("signTime") == null) {
        this.$message.error("您未签到！");
      } else {
        let signOutTime = new Date();
        let hours = Math.floor(
          (signOutTime.getTime() - signInTime.getTime()) / 3600000
        );
        let minute = Math.floor(
          (signOutTime.getTime() - signInTime.getTime()) / 60000
        );
        let useTime = hours + "时" + minute + "分";
        let res = await axios({
          url: "http://120.77.41.127:8080/nameUser/saveOrUpdate",
          method: "post",
          params: {
            learningTime: hours * 60 + minute,
          },
        });
        console.log(res);
        this.$alert(useTime, "使用时间", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message.success("已离开");
            // 删除签到时间
            sessionStorage.removeItem("signTime");
            sessionStorage.setItem("longTime", hours * 60 + minute);
          },
        });
      }
    },
  },
  components: {
    seat,
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 30) {
        return value.slice(0, 30) + "...";
      }
      return value;
    },
  },
};
</script>
